<!--
 * @Author: @yzcheng
 * @Date: 2021-02-25 16:53:16
 * @Version: 1.0
 * @LastEditors: @yzcheng
 * @Description: 
 * @LastEditTime: 2021-05-20 14:53:08
-->
<template>
  <div class="define_main">
    <div class="define_header">
      <div><i class="el-icon-edit-outline"></i>{{ $t('flowDefine.flowDefineTitle') }}</div>
      <div class="define_operation">
        <div class="define_search">
          {{ $t('button.search') }}
          <el-switch v-model="value" active-color="#13ce66" inactive-color="#589ef8"> </el-switch>
        </div>
        <!-- <div class="define_deployment">
          <el-button
            @click="dialogFormVisible = !dialogFormVisible"
            size="small"
            icon="el-icon-plus"
            >{{ $t("flowDefine.deployment") }}</el-button
          >
        </div> -->
      </div>
    </div>
    <div class="define_form">
      <el-collapse-transition>
        <el-form
          v-show="value"
          ref="form"
          size="small"
          inline
          :model="form"
          label-width="auto"
          :rules="rules"
        >
          <el-form-item prop="flowName" :label="$t('flowDefine.form.flowName.title')">
            <el-input
              :placeholder="$t('flowDefine.placeholder.flowName')"
              v-model="form.flowName"
            ></el-input>
          </el-form-item>
          <el-form-item prop="flowKey" :label="$t('flowDefine.form.flowKey.title')">
            <el-input
              :placeholder="$t('flowDefine.placeholder.flowKey')"
              v-model="form.flowKey"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('flowDefine.form.systematicName.title')">
            <el-input
              @click="dialogSelect = true"
              readonly
              v-model="form.flowTypeName"
              :placeholder="$t('flowDefine.placeholder.flowType')"
            >
              <template #suffix>
                <i class="el-icon-search el-input__icon"> </i>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('flowDefine.form.flowStatus.title')">
            <el-select
              v-model="form.flowStatus"
              :placeholder="$t('flowDefine.placeholder.flowStatus')"
            >
              <el-option label="已启动" value="1"></el-option>
              <el-option label="已挂起" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="currentChange"> {{ $t('button.search') }}</el-button>
            <el-button @click="onreset"> {{ $t('button.reset') }}</el-button>
          </el-form-item>
        </el-form>
      </el-collapse-transition>
    </div>
    <div class="define_content">
      <el-scrollbar>
        <el-table
          v-loading="loading"
          :data="FlowPageData.records"
          border
          style="width: 100%; height: 550px; overflow: auto"
        >
          <el-table-column
            prop="sequence"
            :label="$t('flowDefine.table.sequence')"
            align="center"
            width="50px"
          >
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="name" :label="$t('flowDefine.table.flowName')">
            <template #default="scope">
              <div style="color: #4f78da; cursor: pointer">
                {{ scope.row.name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="key" :label="$t('flowDefine.table.flowKey')">
          </el-table-column>
          <el-table-column
            prop="categoryName"
            :label="$t('flowDefine.table.flowType')"
            align="center"
          >
            <template #default="scope">
              <div style="color: #4f78da; cursor: pointer">
                {{ scope.row.categoryName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="version"
            :label="$t('flowDefine.table.flowVersion')"
            align="center"
          >
            <template #default="scope">
              <div style="color: #4f78da; cursor: pointer">
                {{ scope.row.version + 'v' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="suspensionState"
            :label="$t('flowDefine.table.flowStatus')"
            align="center"
          >
            <template #default="scope">
              <div style="color: #4f78da; cursor: pointer">
                {{ status[scope.row.suspensionState] }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="deployTime"
            :label="$t('flowDefine.table.defineTime')"
            align="center"
          >
            <template #default="scope">
              {{ $dayjs.formateDate(scope.row.deployTime, 'YYYY-MM-DD hh:mm:ss') }}
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="createByName"
            :label="$t('flowDefine.table.creator')"
            align="center"
          >
          </el-table-column> -->
          <el-table-column
            prop="operation"
            width="400px"
            :label="$t('flowDefine.table.operation')"
            align="center"
          >
            <template #default="scope">
              <div class="define_operations">
                <el-tooltip class="item" effect="dark" content="预览流程图" placement="top">
                  <i  v-limit="'LCZX:LCKZ:LCDY:SHOW'" @click="showChart(scope.row.id)" class="el-icon-document"></i>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="下载流程图" placement="top">
                  <i  v-limit="'LCZX:LCKZ:LCDY:DOWNLOAD'" @click="download(scope.row.id)" class="el-icon-download"></i>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="挂起流程" placement="top">
                  <i  v-limit="'LCZX:LCKZ:LCDY:HANGUP'" @click="setHang(scope.row)" class="el-icon-sort-up"></i>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="删除流程" placement="top">
                  <i  v-limit="'LCZX:LCKZ:LCDY:DELETE'" @click="setDelete(scope.row)" class="el-icon-delete"></i>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>

      <el-pagination
        align="right"
        background
        @prev-click.stop="currentChange"
        @next-click.stop="currentChange"
        @current-change="currentChange"
        layout="prev, pager, next"
        :total="FlowPageData.total"
      >
      </el-pagination>
    </div>
    <SelectTree
      v-model:visible="dialogSelect"
      :flow="form"
      :treeData="treeData"
      @submit="setFlowType"
      @down="down"
    />
    <el-dialog
      :title="$t('flowDefine.flowchart')"
      width="70vw"
      destroy-on-close
      :model-value="dialogChart"
    >
      <FlowChart :procDefId="procDefId" @down="down" />
    </el-dialog>
    <el-dialog :title="$t('common.hint')" width="30%" destroy-on-close :model-value="dialogHang">
      <span>{{
        suspensionState === 1
          ? $t('flowDefine.operationValue.hang')
          : $t('flowDefine.operationValue.start')
      }}</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogHang = false">{{ $t('common.cancel') }}</el-button>
          <el-button type="primary" @click="onHang">{{ $t('common.ok') }}</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog :title="$t('common.hint')" width="30%" destroy-on-close :model-value="dialogDelete">
      <span>{{ $t('flowDefine.operationValue.delete') }}</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogDelete = false">{{ $t('common.cancel') }}</el-button>
          <el-button type="primary" @click="onDelete">{{ $t('common.ok') }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from 'vuex'
// import Modal from "./components/modal.vue";
import SelectTree from './components/selectTree.vue'
import FlowChart from './components/flowChart.vue'
export default {
  name: 'define_main',
  components: {
    FlowChart,
    SelectTree,
  },
  data() {
    return {
      loading: false,
      dialogFormVisible: false,
      dialogSelect: false,
      dialogChart: false,
      dialogDelete: false,
      dialogHang: false,
      value: true,
      procDefId: null,
      suspensionState: 1,
      item: {},
      status: { 1: '已启动', 2: '已挂起' },
      rules: {
        flowName: [
          {
            min: 0,
            max: 10,
            message: this.$t('validate.lengthWarning', [0, 10]),
            trigger: 'blur',
          },
        ],
        flowKey: [
          {
            min: 0,
            max: 50,
            message: this.$t('validate.lengthWarning', [0, 50]),
            trigger: 'blur',
          },
        ],
      },
    }
  },
  computed: {
    ...mapState({
      treeData: (state) => state.flowClassifyStore.treeData,
      FlowPageData: (state) => state.flowDefineStore.FlowPageData,
      form: (state) => state.flowDefineStore.form,
      pageNum: (state) => state.flowDefineStore.pageNum,
    }),
  },
  mounted() {
    this.getFlowData()
  },
  methods: {
    ...mapMutations('flowDefineStore', ['savePage']),
    ...mapActions('flowDefineStore', [
      'getFlowDownload',
      'performDeleteByFlowId',
      'performSuspendAllById',
      'getFlowDefineList',
      'reset',
    ]),
    /**
     *  选择流程分类
     *
     * @param {*} type
     * @return {*}
     */
    setFlowType(type) {
      this.form.flowType = type.id
      this.form.flowTypeName = type.name
      this.down()
    },
    /**
     *  重置条件
     *
     * @return {*}
     */
    async onreset() {
      await this.reset()
      await this.getFlowData()
    },
    /**
     *  显示流程图
     *
     * @return {*}
     */
    showChart(procDefId) {
      this.procDefId = procDefId
      this.dialogChart = !this.dialogChart
    },
    /**
     *  挂起or启动
     *
     * @return {*}
     */
    onHang() {
      this.dialogHang = false
      this.performSuspendAllById({
        procDefId: this.item.id,
        suspend: this.item.suspensionState === 1 ? 2 : 1,
      })
    },
    /**
     *  删除流程
     *
     * @return {*}
     */
    onDelete() {
      this.dialogDelete = false
      this.performDeleteByFlowId(this.item.deploymentId)
    },
    /**
     *  挂起流程的弹出层
     *
     * @return {*}
     */
    setHang(item) {
      this.item = item
      this.suspensionState = item.suspensionState
      this.dialogHang = true
    },
    /**
     *  删除流程的弹出层
     *
     * @return {*}
     */
    setDelete(item) {
      this.item = item
      this.dialogDelete = true
    },
    /**
     *  获取列表
     *
     * @return {*}
     */
    currentChange(Num) {
      this.getFlowData(Number(Num) || undefined)
    },
    // close() {
    //   this.dialogFormVisible = !this.dialogFormVisible;
    // },
    /**
     *  打开遮罩层
     *
     * @return {*}
     */
    down() {
      this.dialogSelect = !this.dialogSelect
    },
    /**
     *  调起下载方法
     *
     * @return {*}
     */
    async download(procDefId) {
      const res = await this.getFlowDownload(procDefId)
      this.createDownload(res.data, res.headers?.['content-disposition'], res.status)
    },
    /**
     *  拿到下载返回的数据进行处理
     *
     * @return {*}
     */
    createDownload(data, type, rst) {
      const info = this.$t('flowTask.flowData', [
        this.$t('button.download'),
        this.$t('flowTask.flowChart'),
      ])
      this._info(rst, {
        success: [info],
        error: [info],
      })
      if (!data) {
        return
      }
      let BLOB = new Blob([data])
      let url = window.URL.createObjectURL(BLOB)
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', type.split('=')[type.split('=').length - 1])
      document.body.appendChild(link)
      link.click()
    },
    /**
     *  获取定义分页数据
     *
     * @return {*}
     */
    async getFlowData(num = 1) {
      this.savePage(num)
      this.loading = true
      const rst = await this.getFlowDefineList()
      this.loading = false
      console.log(this.FlowPageData, 'FlowPageData')
      // this._info(rst, {
      //   success: [
      //     // this.$t("flowTask.flowData", [
      //     //   this.$t("button.search"),
      //     //   this.$t("flowDefine.title"),
      //     // ]),
      //   ],
      //   error: [this.$t('flowTask.flowData')],
      // })
    },
  },
}
</script>
<style lang="scss">
body .el-popconfirm__main {
  width: 300px;
}
</style>
<style lang="scss" scoped>
.define_main {
  background: #fff;
  display: flex;
  flex-direction: column;
  height: calc(100%);
  width: 100%;
  padding-left: 10px;
  .define_header {
    border-bottom: 1px solid #eee;
    height: 40px;
    width: 100%;
    line-height: 40px;
    display: flex;
    justify-content: space-between;
    & i {
      color: #3e70dd;
      padding: 0 5px;
    }
  }
  .define_form .el-input {
    width: 120px;
  }
  .define_form {
    padding: 10px 0;
  }
  .define_operation {
    display: flex;
    justify-content: space-around;
    align-items: center;
    & > div {
      margin-right: 5px;
    }
  }
  .define_operations {
    display: flex;
    justify-content: space-around;
    align-items: center;
    & > i {
      font-size: 20px;
      color: #4f78da;
      cursor: pointer;
    }
  }
}
</style>
<style>
.define_form .el-input {
  width: 120px;
}
</style>
